<template>
  <view class="container">
    <!-- 添加返回按钮 -->
    <view class="navbar">
      <view class="back-button" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
    </view>
    
    <!-- 原有内容 -->
    <text>卡片索引: {{ cardIndex }}</text>
    <text>正逆位: {{ isReverse ? '逆位' : '正位' }}</text>
    <image :src="cardImage" class="card-image" :style="{ transform: isReverse ? 'rotate(180deg)' : 'none' }"></image>
    <text class="card-interpretation">{{ cardInterpretation }}</text>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import cardData from '@/db/index.json';

const cardIndex = ref('');
const isReverse = ref(false);
const cardImage = ref('');
const cardInterpretation = ref('');



onLoad((options) => {
  if (options.index) {
    cardIndex.value = options.index;
    const index = parseInt(cardIndex.value);
    // 根据索引获取卡片图片
    if (cardData.cards[index]) {
      cardImage.value = cardData.cards[index].src;
    }
  }
  if (options.isReverse) {
    isReverse.value = options.isReverse === 'true';
  }
  const index = parseInt(cardIndex.value);
  // 根据正逆位获取解读内容
  if (cardData.cards[index]) {
    cardInterpretation.value = isReverse.value 
      ? cardData.cards[index].contentni 
      : cardData.cards[index].contentzheng;
  }
});

// 添加返回函数
const goBack = () => {
  uni.navigateBack({
    fail: (err) => {
      console.error('返回失败:', err)
      uni.showToast({
        title: '返回失败',
        icon: 'none'
      })
    }
  })
}
</script>
<style scoped>
/* 修改导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20rpx;
  z-index: 999;
}

.back-button {
  width: 80rpx;
  height: 80rpx;
  margin-left: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 50%;
}

/* 调整容器上边距，为固定定位的导航栏留出空间 */
.container {
  padding: 120rpx 20rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-image {
  width: 300rpx;
  height: 450rpx;
  margin: 20rpx 0;
}
.card-interpretation {
  font-size: 28rpx;
  color: #333;
  text-align: center;
}
</style>
